<template>
<van-nav-bar
  title="营业点详情"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-card>
  <template #tags>
     <div style="font-size: medium; font-weight: 900; display: inline-block; justify-content: top;" >{{ outlet.name }}<br>
      <van-tag plain type="primary">营业中</van-tag>
     </div>
    
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px; left: 5px; float: right;"
    >
  </template>
  <template #footer>
    <hr>
    {{ outlet.address }}
    <van-button size="mini">位置信息</van-button>
  </template>
</van-card>
<h2 style="text-align: center;">洗衣机</h2>
<div style="display: flex; justify-content: left;  margin-top: 10px;">
  <van-sidebar v-model="active" @change="onChange" style="display: inline-block; width: 20%; ">
    <van-sidebar-item title="全部"/>
    <van-sidebar-item title="1F" />
    <van-sidebar-item title="2F" />
    <van-sidebar-item title="3F" />
    <van-sidebar-item title="4F" />
    <van-sidebar-item title="5F" />
  </van-sidebar>


  <!-- 弹出层 -->
  <div style="display: inline-block; width: 100%; margin-left: 20%; ">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in equiplist" :key="item"  :value="item.floor+'楼'" is-link title="基础用法" @click="showequf(item.id)">
        <template #title>
          <span class="custom-title" style="font-weight: 800;">{{item.name}}</span><br>
          <van-tag type="primary">{{ item.status===true?'空闲':'使用中' }}</van-tag>
        </template>
      </van-cell>
      <van-action-sheet v-model:show="show" >
        <p style="font-weight: 800;">{{ equip.name }}</p>
        模式选择
        <van-radio-group v-model="checked" shape="square">
          <van-cell-group inset >
            <van-cell title="标准洗" clickable @click="checked='标准洗', changeprice(5.00)" label="预计25分钟">
              <template #right-icon>
                <span style="color: red; float: right"> ￥5.00 </span>
                <van-radio name="标准洗" />
              </template>
            </van-cell>
            <van-cell title="快速洗" clickable @click="checked ='快速洗', changeprice(3.00)" label="预计15分钟">
              <template #right-icon>
                <span style="color: red; float: right">￥3.00</span>
                <van-radio name="快速洗"  />
              </template>
            </van-cell>
            <van-cell title="强力洗" clickable @click="checked ='强力洗', changeprice(9.00)" label="预计50分钟">
              <template #right-icon>
                <span style="color: red; float: right">￥9.00</span>
                <van-radio name="强力洗"  />
              </template>
            </van-cell> 
          </van-cell-group>
        </van-radio-group>
        <van-field v-model="digit" type="digit" label="使用积分" placeholder="请输入您要使用的积分（10积分抵扣1元）" />
        <div style="margin: 16px;">
          <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
          />
          <van-popup
            v-model:show="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px;"
          >
            <van-coupon-list
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              :disabled-coupons="disabledCoupons"
              @change="onChange"
              @exchange="onExchange"
            />
          </van-popup>
          <p>应付(未抵扣): {{price}} 元</p>
          <van-button round block type="primary" native-type="submit" @click="topay">
            立即下单
          </van-button>
        </div>
      </van-action-sheet>

    </van-list>

  </div>
</div>

</template>
<script setup>
import axios from 'axios';
import { ref ,onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const id= route.params.id
const outlet = ref({})
const digit = ref()
const loading = ref(true);
const finished = ref(false);
const price = ref(5.00)
const changeprice = (va) => {
  price.value = va
}

const getOutlet = async () => {
  console.log(id, "22222")
  const res = await axios.get(`http://localhost:8000/zhxy/outlet/detail/${id}/`).then(res => {
  outlet.value = res.data.data
  console.log(outlet.value)
})}

const equiplist = ref([])
const getequiplist = async (floor=null) => {
  if (floor == 0) {
    const res = await axios.get(`http://localhost:8000/zhxy/equip/list/`,{params: {oid : id}}).then(res => {
  equiplist.value = res.data.data
  console.log(equiplist.value,210)
  })} else {
    const res = await axios.get(`http://localhost:8000/zhxy/equip/list/`,{params: {oid : id, floor: floor}}).then(res => {
  equiplist.value = res.data.data
  console.log(equiplist.value,211)
})
} }
const active = ref(0);
    const onChange = (index) => getequiplist(index)

const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    for (let i = 0; i < equiplist.value.count; i++) {
      equiplist.value.push(i + 1); 
    }
    loading.value = false;
    finished.value = true; // 如果我们的目标是填充list到equiplist.value.count的长度
  }, 10);
};

let equip = ref({})
const getequip= async (id) => {
  const res = await axios.get(`http://localhost:8000/zhxy/equip/detail/${id}/`).then(res => {
  equip.value = res.data.data
  console.log(equip.value)
})}
const checked = ref('标准洗');
const show = ref(false);
const showequf =(id)=> {
  show.value = true
  getequip(id)
}
let ordernum = ref({})
const topay = () => {
  axios.post(`http://localhost:8000/zhxy/order/create/`,{
     equipid: equip.value.id,
      userid: localStorage.getItem('userid'),
      outlet: outlet.value.id,
      score : digit.value,
      request_service : checked.value,
      cope_with : price.value,
    }).then(res => {
    ordernum.value=res.data.data
    router.push({path:'/order',query:{ordernum:ordernum.value}})
  }).catch(error => {
    // 处理错误
    console.error('Error creating order:', error);
    // 显示错误消息给用户
  });
}
const onClickLeft = () => {
  router.back()
}


onMounted(() => {
  getOutlet()
  getequiplist()
}
)
</script>



<style lang="scss" scoped>

</style>